<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num"><button v-on:click="num++">点闫杰</button>
        <h1>{{name}} world! {{num}}</h1>
    </div>

<script type="text/javascript">

    var app=new Vue({
        //this变量还不能使用，在data下的数据，和methods下的方法
        beforeCreate(){
            console.log(this);
           // console.log(this.num); //未定义
           // console.log(this.name);//未定义
        },
        created(){

            console.log(this.num);//1
            console.log(this.name);//hello
        },
        el:"#app", //通过id选中要渲染的页面元素

        data:{ //里面有很多属性，都可以渲染到视图中
            name:"hello",
            num:1

        }

    });

</script>
</body>
</html>